<template>
<Card :dis-hover="true">
  <div style="text-align:right">
    <ButtonGroup shape="circle">
      <Button type="primary" v-if="project.ImsProjectMediumTerm && 
                                  project.ImsProjectMediumTerm.length == 0 &&
                                  user.Id === project.CId"
                                  @click="setCheckHandler"> 填写中期检查报告</Button>
      <Button type="primary" v-if="project.ImsProjectMediumTerm && 
                                  project.ImsProjectMediumTerm.length >  0 && 
                                  project.ImsProjectFinishReport.length == 0 &&
                                  user.Id === project.CId" 
                                  @click="setFinsishHandler"> 
                                    填写结项报告</Button>
    </ButtonGroup>
  </div>
  <!-- 项目基本信息 -->
  <div>
      <Chuangxin v-if="$route.params.project.ProjectType == 0" tpl :ath="$route.params.project"/>
      <Chuangye v-else-if="$route.params.project.ProjectType == 1" tpl :ath="$route.params.project"/>
      <Chuangxing v-else tpl :ath="$route.params.project"/>
  </div>
  <!-- 中期审核报告 -->
  <div v-if="project.ImsProjectMediumTerm && project.ImsProjectMediumTerm.length > 0">
    <MediumTerm :tpl="true" :ath="project.ImsProjectMediumTerm[0]"></MediumTerm>
  </div>

  <!-- 结项报告 -->
  <div  v-if="project.ImsProjectMediumTerm && project.ImsProjectFinishReport.length > 0">
    <FinishReport :tpl="true" :ath="project.ImsProjectFinishReport[0]"></FinishReport>
  </div>

  <!-- 历史审批信息 -->
  
  <Row>
    <!-- 立项审批信息 -->
    <Col v-if="editorable" span="24" class="flow-state">
       <Card >
         <div>
              <p>审批信息</p><hr/><br/>
              <p v-if="SetUp.length <= 0">暂无</p>
             <Steps v-else :current="(SetUp.length-1)" class="setp">
                  <Step v-for="item in SetUp" :title="item.Text" :key="item.Id" :content="item.Approver + '  审核时间：'+dateFormat(item.Utime)"></Step>
              </Steps>
         </div>
       </Card>
    </Col>
  </Row>
  <Row v-if="editorable" :gutter="15">
    <Col span="24">
      <Card :dis-hover="true">
          <Form>
            <FormItem label="选择专家组" v-if=" currentStateIns.Text === '选择审批专家组' || currentStateIns.Text === '分配专家组'">
              <Select v-model="remark" style="width:200px">
                <Option v-for="item in group" :value="item.Id" :key="item.Id">{{ item.Name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="选择专家" v-if=" currentStateIns.Text === '确定参与审批专家'">
              <Select multiple v-model="remark" style="width:200px">
                      <Option v-for="item in professors" :value="item.Id" :key="item.Id">{{ item.Abbr }}</Option>
              </Select>
            </FormItem>
            <div v-if=" currentStateIns.Remark === 'ZHUANJIASHENHE'">
              <table class="gridtable" border="1" v-if="project.ProjectType === 0">
                <thead>
                <tr>
                  <th>评分内容</th>
                  <th>分值</th>    
                  <th>具体要求</th>
                  <th colspan="3">评分标准</th>         
                  <th>得分</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>1、创新体现</td>
                  <td>20</td>
                  <td>项目要体现知识创新、技术创新或思维方法创新。</td>
                  <td>优秀(20-18)</td>
                  <td>一般(17.5-12)</td>
                  <td>合格(17.5-12)</td>
                  <td><InputNumber :max="20" :min="0" :step="0.5" v-model="score.first" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>2、团队组织</td>
                  <td>20</td>
                  <td>td>项目要体现知识创新、技术创新或思维方法创新。</td>
                  <td>优秀(20-18)</td>
                  <td>一般(17.5-12)</td>
                  <td>合格(11.5-0)</td>
                  <td><InputNumber :max="20" :min="0" :step="0.5" v-model="score.second" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>3、选题科学</td>
                  <td>15</td>
                  <td>选题科学、内容新颖，具有挑战性和前景价值，有助于增创新创业意识和能力。</td>
                  <td>优秀(15-13.5)</td>
                  <td>一般(13-9)</td>
                  <td>合格(8.5-0)</td>
                  <td><InputNumber :max="15" :min="0" :step="0.5" v-model="score.third" @on-change="socreChage"></InputNumber></td>
                </tr>

                <tr>
                  <td>4、项目方案</td>
                  <td>25</td>
                  <td>项目方案条理清晰，设计思路合理，方法具备一定可行性，主客观条件能满足项目要求。</td>
                  <td>优秀(25-22.5)</td>
                  <td>一般(22-15)</td>
                  <td>合格(14.5-0)</td>
                  <td><InputNumber :max="25" :min="0" :step="0.5" v-model="score.forth" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>5、预期目标</td>
                  <td>10</td>
                  <td>以知识拓展、技术创新为特色的项目要有相关科学技术发展的简要说明，以思维方法创新为主的项目要有科学逻辑关系。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.fifth" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>6、研究方法</td>
                  <td>10</td>
                  <td>项目实施过程确实可以得到创新能力的训练。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.sixth" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>总分</td>
                  <td colspan="6">{{score.total}}</td>
                </tr>
                </tbody>
              </table>
              <table class="gridtable" border="1" v-else>
                <thead>
                <tr>
                  <th>评分内容</th>
                  <th>分值</th>    
                  <th>具体要求</th>
                  <th colspan="3">评分标准</th>         
                  <th>得分</th>
                </tr>
                </thead>
                <tbody>
    
				


                <tr>
                  <td> 1、产品或服务概述</td>
                  <td>20</td>
                  <td>明确表述产品或服务的用户需求；指出产品或服务目前的技术发展现状。</td>
                  <td>优秀(20-18)</td>
                  <td>一般(17.5-12)</td>
                  <td>合格(17.5-12)</td>
                  <td><InputNumber :max="20" :min="0" :step="0.5" v-model="score.first" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>2、市场机会及竞争</td>
                  <td>15</td>
                  <td>市场调查基础上明确阐述产品或服务的市场容量与趋势、目标市场竞争状况，细分市场及客户描述。</td>
                  <td>优秀(15-13.5)</td>
                  <td>一般(13-9)</td>
                  <td>合格(8.5-0)</td>
                  <td><InputNumber :max="15" :min="0" :step="0.5" v-model="score.second" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  				
                  <td>3、财务分析</td>
                  <td>10</td>
                  <td>提供相关的财务信息。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.third" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>4、营销策略</td>
                  <td>10</td>
                  <td>市场进入策略和市场开发策略，营销渠道描述。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.forth" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>5、运作经营</td>
                  <td>10</td>
                  <td>说明供应链及生产安排情况。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.fifth" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>

                  <td>6、团队管理</td>
                  <td>10</td>
                  <td>合理进行营销、财务、行政、生产、技术团队的分工，明确各成员的角色分配。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.sixth" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>7、项目可行</td>
                  <td>10</td>
                  <td>分析项目实施的可行性，市场接受程度。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.seventh" @on-change="socreChage"></InputNumber></td>
                </tr>
                <tr>
                  <td>8、项目创新</td>
                  <td>10</td>
                  <td>指出项目的技术含量或者对项目本身的创新程度能够完整的定义和阐述。</td>
                  <td>优秀(10-9)</td>
                  <td>一般(8.5-6)</td>
                  <td>合格(5.5-0)</td>
                  <td><InputNumber :max="10" :min="0" :step="0.5" v-model="score.eighth" @on-change="socreChage"></InputNumber></td>
                </tr>
                
                <tr>
                  <td>总分</td>
                  <td colspan="6">{{score.total}}</td>
                </tr>
                </tbody>
              </table>
            </div>
            <FormItem label="备注" v-show="!(currentStateIns.Text === '选择审批专家组' || currentStateIns.Text === '分配专家组')">
              <Input type="textarea" :rows="3" v-model="remark" ></Input>
            </FormItem>
            <FormItem>
              <ButtonGroup >
                <Button type="primary" v-for="val in transtationInstance" :key="val.Id" @click="send(val)"> {{val.Name === '聚合' ? '提交':val.Name }}</Button>
              </ButtonGroup>
            </FormItem>
          </Form>
          
          
      </Card>
    </Col>
  </Row>
</Card>
</template>

<script>
import { mapMutations, mapGetters, mapState } from 'vuex';
import { newApiParams, GUID } from '@/common/utils';
import Chuangxin from '../projectSetUp/Chuangxin.vue';
import Chuangye from '../projectSetUp/Chuangye.vue';
import Chuangxing from '../projectSetUp/Chuangxing.vue';
import MediumTerm from '../check/MediumTerm.vue';
import FinishReport from '../finish/FinishReport.vue';

import moment from 'moment';
export default {
  name: 'Auditing',
  components: {
    Chuangxin,
    Chuangye,
    Chuangxing,
    MediumTerm,
    FinishReport
  },
  data () {
    return {
      score: {
        total: 0,
        first: 0,
        second: 0,
        third: 0,
        forth: 0,
        fifth: 0,
        sixth: 0,
        seventh: 0,
        eighth: 0
      },
      project: {},
      flowInstance: {},
      stateInstance: [],
      currentStateIns: {},
      transtationInstance: [],
      SetUp: [],
      Check: [],
      Finish: [],
      Result: [],
      Changes: [],
      group: [],
      remark: '',
      page: {
        searchKey: '', // 过滤关键字，预留，暂未使用， String
        pagesize: 0, // sql limit 关键字, 分页查询使用 Number
        page: 0, // sql offset 关键字, 分页查询使用 Number
        sortby: [], // sql 排序关键字， eg. seq  Array [String, String ...]
        order: [], // sql 排序关键字， eg. asc, desc 只能从这里个中获取，且和sortby对应  Array [String, String ...]
        fields: [], // 返回的字段 Array [String, String ...]
        query: {} // 其它查询条件, 如 Id = 1, 表示为 query.Id = 1
      },
      tutors: [],
      dateRange: [],
      professors: [],
      levelArray: [
        {
          key: '全国',
          value: 0
        },
        {
          key: '省级',
          value: 1
        },
        {
          key: '市级',
          value: 2
        }
      ],
      sourceArray: [
        {
          key: '科研',
          value: 0
        },
        {
          key: '其它',
          value: 1
        }
      ],
      chacterArray: [
        {
          key: '软件工程',
          value: 0
        },
        {
          key: '其它',
          value: 1
        }
      ],
      editorOption: {
        debug: 'warn',
        modules: {
          toolbar: [
            [{
              'size': ['small', false, 'large']
            }],
            ['bold', 'italic'],
            [{
              'list': 'ordered'
            }, {
              'list': 'bullet'
            }],
            ['link', 'image']
          ],
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
          }
        },
        readOnly: true,
        theme: 'snow',
        placeholder: '前景及可行性分析'
      }
    };
  },
  computed: {
    // ...mapState({
    //   user: 'userInfo'
    // }),
    ...mapGetters({
      nav: 'getNav'
    }),
    user () {
      return this.$store.state.app.userInfo;
    },
    projectFlow () {
      return this.$route.params.project;
    },
    // true 审批， false 查看
    editorable () {
      return this.$route.params.editorable;
    },
    // 0 项目申报，1 中期检查，2 结项 3， 项目变更
    ftype () {
      return this.$route.params.type;
    },
    change () {
      return this.$route.params.change;
    },

    // 是否显示中期检查按钮 
    // 当店不是审核状态，项目已立项，当前登陆人为为项目填报人
    // type = 2, statue = 3
    displayMiddleCheck () {
      let flag = true;
      if (this.editorable === true) {
        // console.log('this.editorable === true');
        flag = false;
      }
      if (this.project.Status !== 3) {
        // console.log('this.project.Status !== 3');
        flag = false;
      } 
      if (this.project.Type !== 2) {
        // console.log('this.project.Type !== 2');
        flag = false;
      }
      if (this.user.Id !== this.project.CId) {
        // console.log('this.user.Id !== this.project.CId');
        flag = false;
      }
      return flag;
    },
    // 是否显示申请结项按钮 
    displayFinsish () {
      let flag = true;
      if (this.editorable === true) {
        // console.log('this.editorable === true');
        flag = false;
      }
      if (this.project.Status !== 3) {
        // console.log('this.project.Status !== 3');
        flag = false;
      } 
      if (this.project.Type !== 4) {
        // console.log('this.project.Type !== 2');
        flag = false;
      }
      if (this.user.Id !== this.project.CId) {
        // console.log('this.user.Id !== this.project.CId');
        flag = false;
      }
      return flag;
    },

    // 是否显示项目变更按钮 
    displayChange () {
      return false;
    }

  },
  methods: {
    showMediumReport () {

    },
    showFinsihReport () {

    },
    setCheckHandler () {
      this.$Modal.confirm({
        title: '操作确认',
        content: '<p>是否填写中期检查报告？</p>',
        onOk: () => {     
          // let params = newApiParams();
          // params.query.type = '1';
          // params.query.project = this.project.Id;
          // this.$api.ProjectApprove2CheckOrFinish(params).then((res) => {
          //   this.$Message.success('操作成功！');
          //   this.$router.push({
          //     name: '审核中检查'
          //   });
          // }).catch((err) => {
          //   if (err) {
          //     this.$Message.error(err, 4);
          //   }
          // });
          this.$router.push({
            name: '中期检查报告',
            params: {
              projectId: this.project.Id
            }
          });
        },
        onCancel: () => {
          this.$Message.info('Clicked cancel');
        }
      });
    },

    setFinsishHandler () {
      this.$Modal.confirm({
        title: '操作确认',
        content: '<p>是否填写结项报告？</p>',
        onOk: () => {     
          this.$router.push({
            name: '结项报告',
            params: {
              projectId: this.project.Id
            }
          });
        },
        onCancel: () => {
          this.$Message.info('Clicked cancel');
        }
      });
      // let params = newApiParams();
      // params.query.type = '2';
      // params.query.project = this.project.Id;
      // this.$api.ProjectApprove2CheckOrFinish(params).then((res) => {
      //   this.$Message.success('操作成功！');
      //   this.$router.push({
      //     name: '审核中结题'
      //   });
      // }).catch((err) => {
      //   if (err) {
      //     this.$Message.error(err, 4);
      //   }
      // });
    },
    
    dateFormat (t) {
      return moment(t).format('YYYY/MM/DD');
    },
    getData () {
      this.getProject();
      
      if (this.editorable) {
        this.getFlowData();
      }
    },
    getProject () {
      if (this.change) {
        // this.$api.QueryImsProjectByProjectFlow(this.projectFlow).then(res => {
        //   this.project = res.Data;
        //   this.dateRange[0] = this.project.Start;
        //   this.dateRange[1] = this.project.End;
        // }, err => {
        //   if (err) {
        //     this.$Message.error(err);
        //   }
        // });
        // console.log('changer..........');
        this.project = JSON.parse(JSON.stringify(this.projectFlow));
      } else {
        // console.log('unchanger..........');
        console.log(this.projectFlow);
        this.$api.QueryImsProjectByImsProjectFlow(this.projectFlow).then((res) => {
          if (res.Data) {
            this.project = res.Data;
            this.dateRange[0] = this.project.Start;
            this.dateRange[1] = this.project.End;
          }
        }).catch((err) => {
          if (err) {
            this.$Message.error(err);
          }
        });
      }
    },
    getFlowData () {
      this.page.query['projectFlow'] = this.projectFlow.Id;
      this.page.query['type'] = this.ftype.toString();
      this.page.query['bname'] = this.$route.params.bname;
      // this.page.query['bid'] = this.
      if (this.change) {
        this.page.query['projectFlow'] = this.projectFlow.ProjectId;
        this.page.query['type'] = this.ftype.toString();
      }
      this.$api.QueryFlowData(this.page).then((res) => {
        // console.log(res.Data);
        this.flowInstance = res.Data.flowInstance;

        this.currentStateIns = res.Data.CurrentStateIns;
        this.transtationInstance = res.Data.transtationInstance ? res.Data.transtationInstance : [];
      }).catch((err) => {
        if (err) {
          console.log(err);
          this.$Message.error(err);
        }
      });
    },
    getProfessorGroup () {
      this.$api.GetAllGroup().then((res) => {
        this.group = res.Data;
      }).catch((err) => {
        if (err) {
          this.$Message.console.error(err);
        }
      });
    },
    getProfessor () {
      let params = newApiParams();
      params.query.ProfessorGroupId = this.projectFlow.ProfessorGroupId;
      this.$api.QueryProfessorGroupUsers(params).then((res) => {
        this.professors = res.Data;
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    // 查询导师
    QueryTutor () {
      let params = newApiParams();
      params.query.roleName = '导师';
      this.$api.QueryUsersByRoleNameAndDept(params).then((res) => {
        if (Array.isArray(res.Data) && res.Data.length > 0) {
          this.tutors = res.Data;
          // this.project.TutorId = this.tutors[0]['Id'];
          // this.project.TutorName = this.tutors[0]['Abbr'];
        } else {
          console.log(res);
        }
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    sendScore () {
      this.transtationInstance[0].Result = 1;
      this.transtationInstance[0].Remark = 'ZHUANJIASHENHE';
      this.transtationInstance[0].Opinions = JSON.stringify(this.score);
      this.$api.ImsProjectApprove(this.transtationInstance[0]).then((res) => {
        this.$Message.success('操作成功！');
        this.goback();
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    changeTransInstanceAndSend (flag) {
      this.transtationInstance[0].Result = flag;
      this.$api.ImsProjectApprove(this.transtationInstance[0]).then((res) => {
        this.$Message.success('操作成功！');
        this.goback();
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    send (val) {
      if (Array.isArray(this.remark)) {
        val.Remark = this.remark.join(',');
      } else {
        val.Remark = this.remark;
      }
      if (this.currentStateIns.Remark === 'ZHUANJIASHENHE') {
        val.Remark = JSON.stringify(this.score);
      }
     
      this.$api.ImsProjectApprove(val).then((res) => {
        this.$Message.success('操作成功！');
        this.goback();
      }).catch((err) => {
        if (err) {
          this.$Message.error(err);
        }
      });
    },
    socreChage () {
      this.score.total = this.score.first + this.score.second + this.score.third + this.score.forth + this.score.fifth + this.score.sixth + this.score.seventh + this.score.eighth;
    },
    sendOne (flag) {
      // console.log('SendONE', flag);

      if (flag === 0) {
        let val = this.transtationInstance[0];
        val.Remark = this.remark;
        this.$api.ImsProjectApprove(val).then((res) => {
          this.$Message.success('操作成功！');
          this.goback();
        }).catch((err) => {
          if (err) {
            this.$Message.error(err);
          }
        });
      } else if (flag === 1) {
        console.log(this.remark);
        if (Array.isArray(this.remark) && this.remark.length > 1) {
          let val = this.transtationInstance[0];
          val.Remark = this.remark.join(',');
          this.$api.ImsProjectApprove(val).then((res) => {
            this.$Message.success('操作成功！');
            this.goback();
          }).catch((err) => {
            if (err) {
              this.$Message.error(err);
            }
          });
        } else {
          console.log(this.remark);
        }
      } else {
        console.log(flag);
      }
    },
    goback () {
      setTimeout(() => {
        this.$router.push({
          name: this.nav.back
        });
      }, 500);
    }
  },
  mounted () {
    if (!this.projectFlow) {
      this.$Message.warning('参数异常！');
      this.goback();
    }
    this.getData();
    // this.QueryTutor();
    this.getProfessor();
    this.getProfessorGroup();

    // 
  }
};
</script>

<style >

.flow-state {
  padding: 5px 0;
}
.setp {
  width: 100%;
  /* overflow-x: scroll; */
}
.ul {
  list-style-type: none;
  padding: 5px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: scroll;
}

.ul li {
  /* margin-left: 20px; */
  font-size: 12px;
  line-height: 2.5em;
  background-color: #fdfdfd;
  border-bottom: 0.5px solid gainsboro;
  vertical-align: middle;
}

.ul li:hover {
  background-color: #f0faff;
  ;
}

.ul li .btn {
  /* float: right; */
  margin-bottom: 5px;
}

.table-header {
  margin: 5px;
  text-align: right;
  height: 22px;
}
.ivu-input[disabled] {
  background-color: #ffffff;
  color: #515a6e;
}
.ivu-select-disabled {
  background-color: #ffffff;
  color: #515a6e;
}
.ivu-input-number-disabled .ivu-input-number-input {
    background-color: #ffffff;
  color: #515a6e;
  opacity:1
}
.ivu-select-disabled .ivu-select-selection {
    background-color: #ffffff;
    color: #515a6e;
}
.ql-container {
  height: 35rem;
}
.approve-label {
  display:inline-block;
  width:160px
}

table.gridtable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    width: 100%;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}
</style>
